{% extends 'FortendBundle:Layout:layout.html.twig' %}

{% block title %}首页{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{{ asset('static/lib/swiper/swiper.min.css') }}">
    <link rel="stylesheet" href="{{ asset('static/lib/animate/animate.min.css') }}">
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height:100%;
        }
        body{
            font-family:"microsoft yahei";
        }
        .swiper-container {
            /*  width: 320px;
              height: 480px;*/
            width: 100%;
            height: 100%;
            background:#fff;
        }
        .swiper-slide{
        }
        .swiper-slide{
            width:100%;
            height:100%;
            background:url('{{ asset('static/project/horse/images/bg.png') }}') no-repeat left top;
            background-size:100% 100%;
        }
        img{
            display:block;
        }
        .swiper-pagination-bullet {
            width: 6px;
            height: 6px;
            background: #fff;
            opacity: .4;
        }
        .swiper-pagination-bullet-active {
            opacity: 1;
        }
        @-webkit-keyframes tipmove{0%{bottom:10px;opacity:0}50%{bottom:15px;opacity:1}100%{bottom:20px;opacity:0}}
        /*.ani{*/
        /*position:absolute;*/
        /*}*/
        /*.txt{*/
        /*position:absolute;*/
        /*}*/
        #array{
            position:absolute;z-index:999;left:50%;margin-left:-12px;-webkit-animation: tipmove 1.5s infinite ease-in-out;
        }
        .cy-poetry{
            position: absolute;
            bottom: 40px;
            right: 25px;
        }
        .cy-poetry p{
            font-size: 16px;
            font-weight: bold;
            width: 15px;
            float: right;
            color: #880108;
            margin: 0 15px;
        }
        .jt-name{
            font-size: 22px;
            text-align: center;
            margin-top: 175px;
        }
        .box-center{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .about-us-box{
            width: 80%;
            border: 8px solid rgba(0,0,0,0.2);
            background: rgba(225, 225, 225, 0.5);
            position: relative;
            z-index: 9;
        }
        .about-us-title{
            width: 140px;
            height: 25px;
            line-height: 25px;
            font-size: 14px;
            text-align: center;
            background: rgba(0,0,0,0.2);
            letter-spacing: 4px;
            margin: 20px auto 10px;
        }
        .about-us-text{
            padding: 10px 10px 0 10px;
            line-height: 20px;
            color: #333;
            font-size: 12px;
            text-indent: 10px;
        }
        .about-us-text a{
            color: #333;
        }
        .tj-title{
            font-size: 16px;
            color: #000;
            display: block;
            text-align: center;
        }
        .tj-text{
            font-size: 12px;
            color: #666;
            text-align: center;
            display: block;
        }
        .jc-img-box{
            padding: 10px 10px 0 10px;
            position: relative;
        }
        .jc-img-box:last-child{
            margin-bottom: 10px;
        }
        .jc-img-des{
            width: 100%;
            height: 25px;
            line-height: 25px;
            text-align: center;
            color: #fff;
            background: rgba(0,0,0,0.5);
            margin-top: -25px;
            position: relative;
        }
        .coach-item{
            padding: 10px;
        }
        .coach-avatar{
            margin-right: 10px;
            width: 100px;
            height: 150px;
        }
        .coach-title{
            font-size: 18px;
            text-align: center;
            color: rgb(190, 162, 124);
        }
        .coach-name{
            font-size: 16px;
            text-align: center;
            padding-top: 10px;
        }
        .coach-des{
            font-size: 14px;
            color: #333;
            padding-top: 10px;
            line-height: 20px;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="swiper-container swiper-container-vertical swiper-container-ios">
        <div class="swiper-wrapper">
            <section class="swiper-slide">
                <img src="{{ asset('static/project/horse/images/top-leaf.png') }}" class="ani resize" width="317" height="165" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" alt="" style="position: absolute;left: 0;top: 0;">
                <img src="{{ asset('static/project/horse/images/grassland.png') }}" class="ani resize" alt="" style="width: 100%;position: absolute;bottom: 0;">
                <img src="{{ asset('static/project/horse/images/big-horse.png') }}" class="ani resize" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s" alt="" style="width: 340px;height: 301px;position: absolute;bottom: -15px;">
                <p class="ani resize jt-name" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s">-亳州市骏腾马术俱乐部-</p>
            </section>
            <section class="swiper-slide">
                <img src="{{ asset('static/project/horse/images/top-leaf.png') }}" class="ani resize" width="317" height="165" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s" alt="" style="position: absolute;left: -64px;top: -24px;">
                <div class="box-center">
                    <div class="ani resize about-us-box" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
                        <div class="ani resize about-us-title" swiper-animate-effect="bounce" swiper-animate-duration="1s" swiper-animate-delay="1s">关/于/我/们</div>
                        <div>
                            <div class="about-us-text">
                                亳州骏腾马术俱乐部亳州骏腾马术俱乐部亳州骏腾马术俱乐部亳州骏腾马术俱乐部亳州骏腾马术俱乐部亳州骏腾马术俱乐部亳州骏腾马术俱乐部
                            </div>

                            <div class="about-us-text">
                                亳州骏腾马术俱乐部亳州骏腾马术俱乐部亳州骏腾马术俱乐部亳州骏腾马术俱乐部亳州骏腾马术俱乐部亳州骏腾马术俱乐部亳州骏腾马术俱乐部
                            </div>

                            <div class="about-us-text">
                                <p>
                                    微信号码：15178054866
                                </p>
                                <p>
                                    <a href="tel:15178054866">联系电话：15178054866（点击可拨打电话）</a>
                                </p>
                            </div>

                            <div style="padding: 10px;">
                                <img src="{{ asset('static/project/horse/images/run-horse.gif') }}" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="swiper-slide">
                <img src="{{ asset('static/project/horse/images/top-leaf.png') }}" class="ani resize" width="317" height="165" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s" alt="" style="position: absolute;left: -64px;top: -24px;">
                <div class="box-center">
                    <div class="ani resize about-us-box" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
                        <div class="ani resize about-us-title" swiper-animate-effect="bounce" swiper-animate-duration="1s" swiper-animate-delay="1s">推/荐/课/程</div>
                        <div>
                            <div style="padding: 10px;">
                                <img src="{{ asset('static/project/horse/images/kc-horse.gif') }}" alt="">
                            </div>
                            <div class="about-us-text">
                                <span class="tj-title">推荐课程</span>
                            </div>

                            <div class="about-us-text">
                                <p class="ani resize tj-text" swiper-animate-effect="fadeInUpBig" swiper-animate-duration="1s" swiper-animate-delay="0.5s">32节课，3个月课程</p>
                                <p class="ani resize tj-text" swiper-animate-effect="fadeInUpBig" swiper-animate-duration="1s" swiper-animate-delay="0.5s">一对一全方位马术教学</p>
                            </div>

                            <div class="about-us-text">
                                <span class="ani resize tj-title" swiper-animate-effect="fadeInUpBig" swiper-animate-duration="1s" swiper-animate-delay="0.5s" style="padding-bottom: 10px;">费用：3999</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="swiper-slide">
                <img src="{{ asset('static/project/horse/images/top-leaf.png') }}" class="ani resize" width="317" height="165" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s" alt="" style="position: absolute;left: -64px;top: -24px;">
                <div class="box-center">
                    <div class="ani resize about-us-box" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
                        <div class="ani resize about-us-title" swiper-animate-effect="bounce" swiper-animate-duration="1s" swiper-animate-delay="1s">精/彩/瞬/间</div>
                        <div>
                            <div class="jc-img-box">
                                <img src="{{ asset('static/project/horse/images/jcsj.png') }}" alt="">
                                <p class="jc-img-des">教练教学</p>
                            </div>
                            <div class="jc-img-box">
                                <img src="{{ asset('static/project/horse/images/jcsj.png') }}" alt="">
                                <p class="jc-img-des">教练教学</p>
                            </div>
                            <div class="jc-img-box">
                                <img src="{{ asset('static/project/horse/images/jcsj.png') }}" alt="">
                                <p class="jc-img-des">教练教学</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="swiper-slide">
                <img src="{{ asset('static/project/horse/images/top-leaf.png') }}" class="ani resize" width="317" height="165" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s" alt="" style="position: absolute;left: -64px;top: -24px;">
                <div class="box-center">
                    <div class="ani resize about-us-box" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
                        <div class="ani resize about-us-title" swiper-animate-effect="bounce" swiper-animate-duration="1s" swiper-animate-delay="1s">教/练/团/队</div>
                        <div>
                            <div class="mui-flex coach-item">
                                <div class="cell fixed">
                                    <img src="{{ asset('static/project/horse/images/ddd.png') }}" class="coach-avatar" alt="">
                                </div>

                                <div class="cell">
                                    <p class="coach-title">-马术教练-</p>
                                    <p class="coach-name">姓名：张保峰</p>
                                    <p class="coach-des">十年马术经验,冠军冠军</p>
                                </div>
                            </div>

                            <div class="mui-flex coach-item">
                                <div class="cell fixed">
                                    <img src="{{ asset('static/project/horse/images/ddd.png') }}" class="coach-avatar" alt="">
                                </div>

                                <div class="cell">
                                    <p class="coach-title">-马术教练-</p>
                                    <p class="coach-name">姓名：张保峰</p>
                                    <p class="coach-des">十年马术经验,冠军冠军</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <img src="{{ asset('static/project/yuanxiaojie/images/web-swipe-tip.png') }}" id="array" class="resize">
{% endblock %}

{% block js %}
    <script src="{{ asset('static/lib/swiper/swiper.min.js') }}"></script>
    <script src="{{ asset('static/lib/animate/animate.min.js') }}"></script>
    <script>
        var mySwiper = new Swiper ('.swiper-container', {
            direction : 'vertical',
            pagination: {
                el:'.swiper-pagination',
            },
            mousewheel: true,
            on:{
                init: function(){
                    swiperAnimateCache(this);
                    swiperAnimate(this);
                },
                slideChangeTransitionEnd: function(){
                    swiperAnimate(this);
                }
            }
        })
    </script>
{% endblock %}